import React, { Component } from 'react'
import axios from 'axios'

export default class Search extends Component {

  search = async () => {
    //获取用户的输入(连续解构赋值+重命名)
    const { keyWordElement: { value: keyWord } } = this
    //发送请求前通知App更新状态
    this.props.updateAppState({ isFirst: false, isLoading: true })
    //发送网络请求 - axios
    /*
    axios.get(` https://api.github.com/search/users?q=${keyWord}`).then(
      response => {
        //请求成功后通知App更新状态
        this.props.updateAppState({ isLoading: false, users: response.data.items })
      },
      error => {
        //请求失败后通知App更新状态
        this.props.updateAppState({ isLoading: false, err: error.message })
      }
    ) */

    // 发送网络请求---使用fetch发送（优化）
    try {
      const response = await fetch(`https://api.github.com/search/users?q=${keyWord}`)
      const data = await response.json()
      console.log(data);
      this.props.updateAppState({ isLoading: false, users: data.items })
      // PubSub.publish('atguigu', { isLoading: false, users: data.items })
    } catch (error) {
      console.log('请求出错', error);
      this.props.updateAppState({ isLoading: false, err: error.message })
      // PubSub.publish('atguigu', { isLoading: false, err: error.message })
    }
  }

  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索Github用户</h3>
        <div>
          <input ref={c => this.keyWordElement = c} type="text" placeholder="输入关键词点击搜索" />&nbsp;
					<button onClick={this.search}>搜索</button>
        </div>
      </section>
    )
  }
}
